<template>
    <div>
      <div class="card-header" >
        <Input v-model="name" placeholder="按用户名号查找..." style="width: 200px"></Input>
        <Button type="primary" icon="ios-search" @click="loadData">搜索</Button>
        <Button class="pull-right" icon="ios-plus-empty"  @click="openModal(0)">新增管理员</Button>
      </div>
      <div class="card-body card-padding" >
        <Table :loading="loading" :columns="columns" :data="data"></Table>
      </div>
      <div class="card-footer  card-padding">
        <div class="page pull-right">
          <Page :current.sync="page" :total="totalElement" show-elevator show-sizer  show-total @on-page-size-change="v => pageSize = v"></Page>
        </div>
      </div>

      <Modal
        v-model="modal"
        @on-ok="addOrUpdateAction"
        :title="modalTitle">
        <Form ref="formValidate" :label-width="80">
          <FormItem label="用户名">
            <Input v-model="user.name" placeholder="输入用户名(不能重复)"></Input>
          </FormItem>
          <FormItem  label="密码">
            <Input v-model="user.password" placeholder="输入密码"></Input>
          </FormItem>
          <FormItem label="手机号">
            <Input v-model="user.mobile" placeholder="输入手机号(不能重复)"></Input>
          </FormItem>
        </Form>
      </Modal>
    </div>
</template>

<script>
import {findAll, save, resetPwd, modifyEnable} from '../../api/account/accountApi'
export default {
  data () {
    return {
      modal: false,
      modalTitle: '新增',
      loading: false,
      name: undefined,
      userId: 0,
      columns: [
        {
          title: '序号',
          type: 'index'
        },
        {
          title: '用户名',
          key: 'name'
        },
        {
          title: '手机号',
          key: 'mobile'
        },
        {
          title: '状态',
          key: 'status',
          width: 100,
          sortable: true,
          render: (h, params) => {
            let status = params.row.enable
            return h('span', {
              'class': {
                label: true,
                'label-success': status,
                'label-danger': !status
              }
            }, status ? '正常' : '冻结')
          }
        },
        {
          title: '操作',
          key: 'action',
          fixed: 'right',
          width: 150,
          render: (h, params) => {
            let status = params.row.enable
            return h('div', [
              h('Button', {
                props: {
                  type: 'text',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.changeEnableAction(params.row.id, !params.row.enable)
                  }
                }
              }, status ? '冻结' : '解锁'),
              h('Button', {
                props: {
                  type: 'text',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.restPwdAction(params.row.id)
                  }
                }
              }, '重置密码')
            ])
          }
        }
      ],
      data: [],
      user: {
        name: '',
        password: '',
        mobile: '',
        enable: true
      },
      page: 1,
      totalElement: 0,
      pageSize: 10
    }
  },
  mounted () {
    this.search()
  },
  methods: {
    search () {
      this.page = 1
      this.loadData()
    },
    loadData () {
      this.loading = true
      let params = {
        name: this.name,
        page: this.page - 1,
        size: this.pageSize
      }
      findAll(params, data => {
        this.loading = false
        this.data = data.content
        this.totalElement = data.totalElement
      })
    },
    /**
     * 修改账号状态
     * @param id
     */
    changeEnableAction (id, enable) {
      let params = {
        id: id,
        enable: enable
      }
      modifyEnable(params, _ => {
        this.loadData()
      })
    },
    addOrUpdateAction () {
      save(this.user, _ => {
        this.$Message.success('添加用户成功')
        this.loadData()
      }, _ => this.$Message.error('添加用户失败'))
    },
    openModal (userId) {
      this.userId = userId
      this.modalTitle = '新增'
      this.modal = true
    },
    restPwdAction (userId) {
      resetPwd(userId, _ => this.$Message.success('重置用户密码成功'), _ => this.$Message.error('重置用户密码失败'))
    }
  }
}
</script>

<style lang="less" scoped>

</style>
